<template>
	<view class="main-cont">
		<view class="daka">
			<view class="tips mb10">
				加油!你是最棒的！
			</view>
			<u-input v-model="cont" type="textarea" :border="false" :height="height" placeholder="填写劳动成果"
				maxlength="50000" :custom-style="customStyle" :auto-height="false" />
			<view class="images box box-align-start mt10">
				<view class="item mr10" v-for="(ite,i) in imgurl" :key="i" @click="previewImage(imgurl,i)">
					<u-image :src="ite.url" width="186rpx" height="186rpx" v-if="ite.fileSuffix == 'jpg'">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<u-image :src="ite.tempurl" width="186rpx" height="186rpx" v-if="ite.fileSuffix == 'mp4'">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa"
						v-if="ite.fileSuffix =='mp4'">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="delete box box-align-center box-pack-center" @click.stop="handleDelete(i)">
						<u-icon name="close" color="#fff"></u-icon>
					</view>
					<!-- <video :src="ite.videoUrl" class="my-Video" width="152rpx" height="152rpx" v-if="ite.type == 'mp4'"></video> -->
				</view>
			</view>
			<view class="box box box-align-center box-pack-start mt20 padd20">
				<view class="box box-tb box-align-center box-pack-center" @click="addImg">
					<u-image src="@/static/class/icon_img.png" width="33rpx" height="33rpx"></u-image>
					<view class="">
						图片
					</view>
				</view>
				<view class="ml89 box box-align-center box-pack-center box-tb" @click="addVideo">
					<u-image src="@/static/class/icon_video.png" width="33rpx" height="33rpx"></u-image>
					<view class="">
						视频
					</view>
				</view>
			</view>
			<view class="box box-align-center box-pack-start">
				<view class="mr10">
					同步到劳动风采
				</view>
				<u-switch v-model="checked" active-value="1" active-color="#626BF1" inactive-value="0"
					@change="change()"></u-switch>
			</view>
		</view>
		<view class="fixed box box-align-center box-pack-center" @click="disabled !=false?pubDaka():''">
			<view class="btn">
				发布
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sjid: 0,
				planid: 0,
				ldsjid: 0,
				tb: 1,
				checked: true,
				disabled: true,
				cont: '',
				height: 400,
				dclass: uni.getStorageSync("dclass"),
				user: uni.getStorageSync("user"),
				imgurl: [],
				filesid: [],
				customStyle: {
					backgroundColor: "#F8F9FC",
					padding: "20rpx"
				},
				imgCnt:6,
				videoCnt:3
			}
		},
		onLoad(opt) {
			this.sjid = opt.sjid;
			this.planid = opt.planid;
			this.ldsjid = opt.ldsjid;
		},
		methods: {
			previewImage(val, i) {
				let it = JSON.stringify(val)
				uni.setStorage({
					key: 'item',
					data: it
				})
				uni.navigateTo({
					url: `/pageHome/showFile?index=` + i + `&val=` + encodeURIComponent(it)
				})
			},
			addImg() {
				let limitCnt = this.imgurl.filter((o)=>o.fileSuffix !=`mp4`).length
				console.log();
				if(limitCnt>=6){
					uni.showToast({
						title:"最多上传6张图片",
						icon:"error"
					})
					return
				}else{
					uni.chooseImage({
						count: this.imgCnt-limitCnt, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera', 'album'],
						success: res => {
							//console.log(res);
							this.uploadfile(res.tempFilePaths);
						}
					});
				}
				
			},
			//多文件上传
			uploadfile(file) {
				uni.showLoading({
					title: '上传中'
				})
				var _this = this;
				const tempFilePaths = file;
				//循环遍历传入，达到一次性上传多张的效果
				for (let i = 0; i < tempFilePaths.length; i++) {
					uni.uploadFile({
						// 后端api接口
						url: _this.$api.baseUrl + '/upload/uploadfile',
						// uni.chooseImage函数调用后获取的本地文件路劲
						filePath: tempFilePaths[i],
						name: 'file', //后端通过'file'获取上传的文件对象
						success: (uploadFileRes) => {
							uni.hideLoading()
							const resdata = JSON.parse(uploadFileRes.data);
							console.log(resdata);
							let item = {
								fromtype: 'temp',
								url: resdata.body.data.url,
								fileSuffix: 'jpg',
								fileid: resdata.body.data.fileid
							}
							_this.imgurl.push(item);
							_this.filesid.push(resdata.body.data.fileid);
						}
					})
				}
			},
			addVideo() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: res => {
						this.uploadvideofile(res.tempFilePath, res.thumbTempFilePath);
					}
				});
			},
			//上传多个视频
			uploadvideofile(file, tempFilePath) {
				uni.showLoading({
					title: '上传中'
				})
				var _this = this;
				uni.uploadFile({
					url: _this.$api.baseUrl + '/upload/uploadfile',
					filePath: file,
					name: 'file',
					success: (uploadFileRes) => {
						uni.hideLoading()
						const resdata = JSON.parse(uploadFileRes.data);
						console.log(resdata);
						let item = {
							fromtype: 'temp',
							tempurl: tempFilePath, //临时封面地址
							url: resdata.body.data.firstframe, //封面地址
							fileSuffix: 'mp4',
							videoUrl: resdata.body.data.url, //视频地址
							fileid: resdata.body.data.fileid
						}
						_this.imgurl.push(item);
						_this.filesid.push(resdata.body.data.fileid);
					}
				});
			},
			handleDelete(i) {
				this.imgurl.splice(i, 1)
				this.filesid.splice(i, 1)
			},
			change(e) {
				this.tb = e;
			},
			pubDaka() { //防止连续点击
				this.disabled = false;
				this.$api.post({
					url: '/comm/chkWords',
					method: 'post'
				}, {
					cont: this.cont
				}).then(res => {
					if (res.risky == true) {
						this.$refs.uTips.show({
							title: '检测到违规内容，请重新编辑！',
							type: 'warning',
							duration: '2500'
						});
						this.cont = "";
					} else {
						if (this.cont != '') {

							let opts = {
								url: '/yclassldsjtaskrecords/stuAddSjrw',
								method: 'post'
							};
							let params = {
								planid: this.planid,
								ldsjid: this.sjid,
								classid: this.dclass.id,
								userid: this.user.id,
								tb: this.tb,
								cont: this.cont,
								filesid: this.filesid
							};
							this.$api.post(opts, {
								"str": JSON.stringify(params)
							}).then(res => {
								//console.log(res);
								if (res.code == 0) {
									this.$refs.uToast.show({
										title: '提交成功',
										type: 'success',
										duration: '1500'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 2
										})
									}, 1000);

								}
							})
						} else {
							this.disabled = true;
							this.$refs.uToast.show({
								title: '内容不能为空',
								type: 'warning',
								duration: '1000'
							})
						}
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ml89 {
		margin-left: 89rpx;
	}

	.main-cont {
		box-sizing: border-box;
		width: 100%;
		padding-bottom: 200rpx;

		.detail {
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;
			background: #FFFFFF;
		}

		.tip {
			text-align: center;
			width: 165rpx;
			height: 78rpx;
			line-height: 120rpx;
			font-size: 28rpx;
			border-bottom: 19rpx solid #FEB7AB;
			font-weight: bold;
		}

		.cont {
			margin-top: 20rpx;
			background: #F8F9FC;
			border-radius: 10rpx;
		}

		.images {
			flex-wrap: wrap;
			margin-left: 36rpx;

			.item {
				position: relative;
				margin-bottom: 20rpx;

				.posa {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.delete {
					width: 40rpx;
					height: 40rpx;
					background-color: rgba(0, 0, 0, .3);
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 200rpx;
			background-color: rgba(255, 255, 255, .9);

			.btn {
				width: 466rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(180deg, #7686F6, #626BF1);
				box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
				border-radius: 31rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
			}
		}

		.daka {
			background-color: #fff;
			padding: 20rpx;

			.tips {
				width: 248rpx;
				height: 34rpx;
				background: #FDF5E6;
				border-radius: 11rpx;
				line-height: 34rpx;
				text-align: center;
				font-size: 26rpx;
				color: #FF9B4F
			}
		}
	}
</style>
